/*
 * @Author: 西索酱
 * @Date: 2021-07-04 10:48:16
 * @LastEditTime: 2021-07-05 08:55:31
 * @LastEditors: 西索酱
 * @Description: 
 * @FilePath: \snake_demo2\交互\src\hud\console.tsx
 * 你也在看我的代码吗？
 */

import React, { useState } from 'react';
import { useGameEvent } from 'react-panorama';
let log_text = ''
let code_list:Record<string,string>;
let tipsStyle:Partial<VCSSStyleDeclaration>  = {
    fontSize:'30px'
}

const bCode = (e:string):boolean=>code_list[e]!=null

function CodeButton(params:{text:string,eventName:keyof CustomGameEventDeclarations}) {
    let active = ()=>GameEvents.SendCustomGameEventToServer(params.eventName,{})
    return <Button
            style={{height:'40px',backgroundColor:'green',margin:'2px'}}
            onactivate={active}
        >
            <Label 
                text={params.text} 
                style={{fontSize:'25px',verticalAlign: 'center',textAlign:'right'}} 
            />
        </Button>
}

export function Console () {
    /** 实际显示的文件输出 */
    const [logText,setLogText] = useState<string>('')
    /** 作为按钮显示的code裂变 */
    const [buttons,setButtons] = useState<string[]>([])
    /** 与输入内容相关的code列表 */
    const [ableTip,setAbleTip] = useState<string[]>([])

    let 打印框 = <Panel style={{width:'300px',height:'500px'}} >
            {/* 输出文本 */}
            <Panel id={'console_output'}  style={{width:'100%',height:'100%',backgroundColor:'black',overflow:'scroll'}} >
                <Label text={logText} html={true} style={{fontSize:'25px'}} />
            </Panel>
            
            {/* 代码提示 */}
            <Panel style={{width:'100%',flowChildren:'down',backgroundColor:'gray',verticalAlign: 'bottom',}}>
                {ableTip.map(
                    ele=><Panel style={{flowChildren:'right'}} key={ele}>
                        <Label style={tipsStyle} text={ele} />
                        <Label style={tipsStyle} text={code_list[ele]} />
                    </Panel>
                    )}
            </Panel>
        </Panel>
    let 输入框 = <TextEntry
        id = 'console_input'
        placeholder="在此输入..."
        style={{width:'300px',height:'50px',backgroundColor:'red',fontSize:'22px'}}
        oninputsubmit={OnSubmitted}
        ontextentrychange={OnTryChange}
    />
    let 按钮表 = <Panel style={{ flowChildren: 'right-wrap' }}>
        <CodeButton text={'刷新列表'} eventName={'p_cosole_require'} />
        {buttons.map(
            // @ts-ignore
            ele=><CodeButton text={code_list[ele]} eventName={ele} key={ele}/>
            )
        }
    </Panel>

    /**文本改变事件 每次键入触发 */
    function OnTryChange() {
        let text = ($('#console_input') as LabelPanel).text
        if(text==''){
            setAbleTip([])
        }else{
            let tips:string[] = []
            for (const code in code_list) {
                if(code.match(text)){
                    tips.push(code)
                }
            }
            setAbleTip(tips)
        }
    }

    /** 变动文字 */
    function testChange(params:string) {
        log_text += params + '<br>';
        if (log_text.length>3000){
            log_text = log_text.slice(log_text.indexOf('<br>')+4,log_text.length)
        };
        setLogText(log_text)
        $('#console_output').ScrollToBottom()
    }
    
    /**确定输入事件 enter触发 */
    function OnSubmitted() {
        let text = ($('#console_input') as LabelPanel).text
        if(code_list){
            if(bCode(text)){
                let texts :string[] = text.split(' ')
                let option:string[] = []
                if(texts.length>1){
                    text  = texts[0]
                    option= texts.splice(0,1)
                }
                // @ts-ignore
                GameEvents.SendCustomGameEventToServer(text,option)
                text = '<font color="#e67308">'+text+'</font>';
            }
        }else{
            text += '     请点击 刷新清单 按钮'.replace(/ /g,'&nbsp;');
        }
        ($('#console_input') as LabelPanel).text = ''
        testChange(text)
    }

    /** 接收刷新列表的返回值 */
    useGameEvent('s_console_code_list',event=>{
        code_list = {}
        let newArr:string[] = []
        $.Each(event,ele=>{
            code_list[ele.code] = ele.desc
            if(ele.button && newArr.indexOf(ele.code)<0 ){
                newArr.push(ele.code)
            }
        })
        setButtons(newArr)
    },[])

    /** 接收控制台打印 */
    useGameEvent('s_console_code_log',event=>{
        testChange('<font color="#79dd6a">'+event.msg+'</font>')
    },[])
    
    return (
        <Panel style={{ flowChildren: 'down', verticalAlign: 'center', horizontalAlign: 'left', }}>
            {打印框}
            {输入框}
            {按钮表}
        </Panel>
    );
}
